<template>
    <el-dialog v-model="props.visible" title="添加类型" :before-close="beforeClose">
        <el-form :model="form" label-width="150px" style="max-width: 670px">
            <el-form-item label="类型名称:" prop="editlx">
                <el-input v-model="form.name" placeholder="请输入类型名称" />
            </el-form-item>
            <div class="btn">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup lang='ts'>
import { defineProps, watch, ref, reactive, withDefaults } from "vue";
import type { Ref } from 'vue'
import type { productAttrItem } from '../../request/PmsProductAttributeCategoryController/index'

let props = withDefaults(
    defineProps<{
        visible: boolean;
        form: productAttrItem
    }>(),
    {
        visible: true,
    }
);
//添加表单数据
const form = ref({}) as Ref<productAttrItem>
const originform = ref({}) as Ref<productAttrItem>
// 监听事件
watch(() => props.form, (newVal) => {
    // console.log(newVal);
    form.value = { ...newVal }
})

// 自定义事件
const emits = defineEmits<{
    (event: "cancel"): void;
    (event: "confirm", row: productAttrItem): void;
}>();
let beforeClose = (done: any) => {
    // console.log('beforeClose')
    emits("cancel")
}
// 取消
let onCancel = () => {
    // 清空 实际上是点击取消的时候，将form恢复成备份的值
    form.value = { ...originform.value }
    emits("cancel")
}

// 确定
let onConfirm = () => {
    // console.log(form.value);
    // console.log(row);
    emits('confirm', form.value)
}

</script>


<style lang = "scss" scoped>
.btn {
    position: absolute;
    right: 40px;
    margin-top: -5px;
}
</style>